<template>
  <div :class="[dialogShow ? 'page_body dialog_show' : 'page_body']">
    <div class="coach_home_body">
      <!-- 顶部轮播 -->
      <div class="coach_home_top_box">
        <img
          src="../../assets/image/to_icon04.png"
          class="swiper_box_top_icon"
          @click="toCheckSystemFn()"
        />
        <div class="coach_home_swiper_box">
          <mt-swipe :auto="3000" :showIndicators="showIndicators">
            <mt-swipe-item v-for="(item, index) in bannerList" :key="index">
              <img
                v-if="item.image_path != '' && item.image_path != null"
                :src="item.image_path"
                @click="bannerClickFn(item.type, item.url)"
                class="coach_home_swiper_item_img"
              />
              <!-- <div v-else class="coach_home_swiper_item"></div> -->
              <img
                v-else
                src="../../assets/image/home_banner_img03.png"
                class="coach_home_swiper_item_img"
              />
            </mt-swipe-item>
          </mt-swipe>
        </div>
      </div>

      <div class="coach_home_label_title">功能</div>
      <!-- 功能模块入口 -->
      <div class="coach_home_examination_process">
        <div class="coach_home_examination_process_listBox">
          <div
            class="coach_home_examination_process_item"
            @click="toCoachRegisterFn()"
          >
            <img
              class="coach_home_examination_process_item_img"
              src="../../assets/image/examination_process_icon01.png"
            />
          </div>
          <div class="coach_home_examination_process_item" @click="toTrainFn()">
            <img
              class="coach_home_examination_process_item_img"
              src="../../assets/image/examination_process_icon02.png"
            />
          </div>
          <div class="coach_home_examination_process_item">
            <img
              class="coach_home_examination_process_item_img"
              src="../../assets/image/examination_process_icon03.png"
              @click="tocourse()"
            />
          </div>
          <div
            class="coach_home_examination_process_item"
            @click="toMyHonorFn()"
            style="margin-bottom: 0"
          >
            <img
              class="coach_home_examination_process_item_img"
              src="../../assets/image/examination_process_icon04.png"
            />
          </div>
          <div
            class="coach_home_examination_process_item"
            @click="toCoachImproveFn()"
            style="margin-bottom: 0"
          >
            <img
              class="coach_home_examination_process_item_img"
              src="../../assets/image/examination_process_icon05.png"
            />
          </div>
          <div
            class="coach_home_examination_process_item"
            @click="toUserCenterFn()"
            style="margin-bottom: 0"
          >
            <img
              class="coach_home_examination_process_item_img"
              src="../../assets/image/examination_process_icon06.png"
            />
          </div>
        </div>
      </div>
      <!-- 公告 -->
      <div class="coach_home_label_title">公告</div>
      <div id="coach_home_news_box">
        <!-- <mt-navbar v-model="selected">
          <mt-tab-item id="1">裁判员</mt-tab-item>
          <mt-tab-item id="2">教练员</mt-tab-item>
          <mt-tab-item id="3">青少年</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected" :swipeable="swipeable">
          <mt-tab-container-item id="1">
            <div class="coach_home_news_list">
              <div
                class="coach_home_news_item"
                v-for="(item, index) in refereeNewsList"
                :key="index"
              >
                <div class="coach_home_news_item_top">
                  <div class="coach_home_news_item_title">{{ item.title }}</div>
                </div>
                <div class="coach_home_news_item_bottom">
                  <div class="coach_home_news_item_time">{{ item.time }}</div>
                  <div class="coach_home_news_item_tips">查看详情 ></div>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <div class="coach_home_news_list">
              <div
                class="coach_home_news_item"
                v-for="(item, index) in refereeNewsList"
                :key="index"
              >
                <div class="coach_home_news_item_top">
                  <div class="coach_home_news_item_title">{{ item.title }}</div>
                </div>
                <div class="coach_home_news_item_bottom">
                  <div class="coach_home_news_item_time">{{ item.time }}</div>
                  <div class="coach_home_news_item_tips">查看详情 ></div>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="3">
            <div class="coach_home_news_list">
              <div
                class="coach_home_news_item"
                v-for="(item, index) in teenagersNewsList"
                :key="index"
              >
                <div class="coach_home_news_item_top">
                  <div class="coach_home_news_item_title">{{ item.title }}</div>
                </div>
                <div class="coach_home_news_item_bottom">
                  <div class="coach_home_news_item_time">{{ item.time }}</div>
                  <div class="coach_home_news_item_tips">查看详情 ></div>
                </div>
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container> -->

        <div class="coach_home_news_list">
          <div
            class="coach_home_news_item"
            v-for="(item, index) in coachNewsList"
            :key="index"
            @click="toNewsDetailFn(item.linkUrl)"
          >
            <div class="coach_home_news_item_top">
              <div class="coach_home_news_item_title">{{ item.title }}</div>
            </div>
            <div class="coach_home_news_item_bottom">
              <div class="coach_home_news_item_time">{{ item.time }}</div>
              <div class="coach_home_news_item_tips">查看详情 ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog_block" v-if="dialogShow">
      <div class="dialog_block_box">
        <img
          class="dialog_block_close"
          src="../../assets/image/close_icon01.png"
          @click="closeDialog()"
        />
        <div class="login_dialog_content">
          <div class="login_dialog_content_title">提示</div>
          <div class="login_dialog_content_title">{{ dialogTitle }}</div>
          <div class="login_dialog_content_tips">
            <img
              class="login_dialog_content_tips_icon"
              src="../../assets/image/warning_icon01.png"
              alt=""
            />
            <div class="login_dialog_content_tips_words">
              {{ dialogTips }}
            </div>
          </div>
          <div class="login_dialog_content_btn" @click="toRegister()">
            {{ dialogBtn }}
          </div>
        </div>
      </div>
    </div>
    <HomeFooter :activeKey="activeKey" :systemKey="systemKey"></HomeFooter>
  </div>
</template>
<style src="../../assets/css/coach/coachHome.css" scoped></style>

<script>
import HomeFooter from "@/components/homeFooter.vue";
import { Toast } from "mint-ui";
export default {
  name: "CoachHome",
  components: {
    HomeFooter,
  },
  data() {
    return {
      activeKey: 1,
      systemKey: 1,
      showIndicators: false, // swipe是否显示indicators
      dialogShow: false, // 弹框显示
      dialogTitle: "", // 弹框提示文本
      dialogTips: "", // 弹框提示文本
      dialogBtn: "", // 弹框按钮文本
      dialogLink: "", // 弹框按钮跳转
      swipeable: true, // tab切换动画开启
      selected: "1", // tab选中值
      bannerList: [
        {
          image_path: "",
          type: "",
          url: "",
        },
      ], // banner数据
      baseAPIUrl: this.$store.state.baseAPIUrl,
      coachNewsList: [
        {
          title: "中国篮协E级教练员培训班上海市黄浦站开始报名！",
          id: "00111",
          time: "2023-06-01",
          linkUrl: "https://mp.weixin.qq.com/s/ZVa4vEa269c8pG2I0aH-Zw",
        },
      ], // 公告-教练员
      refereeNewsList: [], // 公告-裁判员
      teenagersNewsList: [], // 公告-青少年
    };
  },
  created: function () {
    this.getBannerFn();
  },
  methods: {
    // 获取banner信息
    getBannerFn() {
      let url = "/mobile/getBanner";
      this.axios.post(url).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.bannerList = res.list;
        }
      });
    },
    // banner跳转
    bannerClickFn: function (is_jump, linkurl) {
      console.log(is_jump, linkurl);
      if (is_jump == "1") {
        window.location.href = linkurl;
      }
    },
    //前往 课程
    tocourse() {
      this.$router.push({
        name: "courselist",
      });
    },
    // 注册认证
    toCoachRegisterFn: function () {
      console.log("222");
      let url = "/mobile/checkUserInfo";
      this.axios
        .post(url)
        .then((res) => {
          if (res.code == 0) {
            // if (res.is_complete == "1") {
            //   Toast({
            //     message: "请去完善信息",
            //     duration: 3000,
            //   });
            // } else if (res.is_complete == "2") {
            //   this.$router.push({
            //     name: "CoachRegister",
            //   });
            // }
            this.$router.push({
              name: "CoachRegister",
            });
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 完善信息
    toCoachImproveFn: function () {
      let key = this.$store.state.isRegister;
      if (key) {
        this.$router.push({
          name: "CoachImproveView",
        });
      } else {
        this.$router.push({
          name: "CoachImprove",
        });
      }
    },
    // 培训报名
    toTrainFn: function () {
      this.$router.push({
        name: "coachEnrollApply",
      });
    },
    // 我的荣誉
    toMyHonorFn: function () {
      let key = this.$store.state.isRegister;
      if (key) {
        this.$router.push({
          name: "MyHonor",
          query: {
            source: "coachHome",
          },
        });
      } else {
        this.openDialog();
      }
    },
    // 返回系统选择
    toCheckSystemFn: function () {
      this.$router.push({
        name: "ChecksyStem",
      });
    },
    // 个人中心
    toUserCenterFn: function () {
      this.$router.push({
        name: "CoachUserCenter",
      });
    },
    // 前往完善信息
    toRegister: function () {
      this.$router.push({
        name: this.dialogLink,
      });
    },
    // 显示弹窗
    openDialog: function () {
      // 完善信息
      this.dialogTitle = "您还没有完善信息";
      this.dialogTips = "完善信息后才能浏览";
      this.dialogBtn = "去完善";
      this.dialogLink = "CoachImprove";
      this.dialogShow = true;
    },
    // 关闭弹窗
    closeDialog: function () {
      this.dialogShow = false;
    },
    // 公告详情
    toNewsDetailFn: function (link) {
      window.open(link);
    },
  },
};
</script>
